<!--  -->
<template>
  <div class='padding20 newExper'>
    <el-steps :active="active">
      <el-step title="基本信息" description="请填写实验基本信息"></el-step>
      <el-step title="申请资源" description="为实验申请资源"></el-step>
      <el-step title="构建拓扑" description="构建实验网络拓扑"></el-step>
    </el-steps>
    <div v-show='active ==1' style="margin-left:35%">
      <FormSearch ref="searchFrom" :formItem="searchItem" :formData.sync="searchData" :isInLine="false" labelWidth='160px' />
    </div>
    <div v-show='active ==2'>
      <applyResources ref='applyResources' />
    </div>
    <div v-show='active ==3'>
      <experReview />
    </div>
    <div class="bottmButton textAlign">
      <el-button @click='$router.push("/scienceExper/views/threatDetection/experiment/index")'>取消</el-button>
      <el-button type="primary" @click="goLast" v-if='active>1'>上一步</el-button>
      <el-button type="primary" @click="goNext" v-if='active !=3'>下一步</el-button>
      <el-button type="primary" @click="submit" v-if='active ==3'>提交</el-button>
    </div>
  </div>
</template>
<script>
import util from "./components/util.js";
import applyResources from "./applyResources";
import experReview from "./newTopology";
import experApi from "../api/exper.service";
// getFirstForm
export default {
  components: {
    applyResources,
    experReview
  },
  data() {
    return {
      active: 1,
      ...util.getFirstForm()
    };
  },

  mounted() {
    this.experType();
    this.resultApl()
  },
  computed: {},
  watch: {},
  methods: {
    async experType() {
      let { data } = await experApi.experType();
      this.searchItem.find(it => it.prop == "expGroup").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
    },
    async resultApl() {
      let { data } = await experApi.resultApl();
      this.searchItem.find(it => it.prop == "resSubway").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
    },
    goLast() {
      this.active--;
    },
    // 下一步
    goNext() {
      this.active++;
    },
    async submit() {
      let obj = {
        formData: {
          ...this.$funUtil.filterObjAttribute(this.searchData, "time")
        },
        resourceData: this.$refs.applyResources.multiSelection.map(it => {
          return {
            name: it.name,
            resType: it.resType,
            resId: it.id,
            count: it.count
          };
        }),
        topoData: {}
      };
      // console.log(obj, "ooo");
      let data = await experApi.add(obj);
      if(data.code = 10200){
        // this.$message.success('添加实验成功')
        this.$message({
          type: "success",
          message: "添加实验成功",
          duration: 500,
          onClose: () =>{
            this.$router.push('/scienceExper/views/threatDetection/experiment/index')
          }
        });
      } else {
        this.$message.success('添加实验失败')
      }
    }
  },
  created() {}
};
</script>
<style lang='less' scoped>
.newExper {
  /deep/ .el-step__main {
    margin-top: -30px;
    margin-left: 31px;
  }
  /deep/ .el-step.is-horizontal .el-step__line {
    margin-left: 110px;
  }
  /deep/ .el-step__head.is-finish {
    .el-step__icon.is-text {
      background: #1890ff;
      color: white;
    }
  }
  /deep/ .el-step__title.is-finish {
    font-size: 18px;
    color: #000000d8;
    font-weight: 700;
  }
  /deep/ .el-step__description.is-finish {
    color: #8d8d8d;
  }
}
</style>
<style lang="less">
.newExper .el-form-item__label{
  padding: 0;
}
</style>